<form nz-form #languageCreateOrEditForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">

    <div class="modal-header">
        <div class="modal-title">
            <i nz-icon type="global" class="mr-sm"></i>
            <span *ngIf="languageId">{{"EditLanguage" | localize}}: {{language.name}}</span>
            <span *ngIf="!languageId">{{"CreateNewLanguage" | localize}}</span>
        </div>
    </div>

    <fieldset>
        <nz-form-item nz-row>
            <nz-form-label nz-col [nzSm]="4" nzFor="languageName" nzRequired>
                {{"Language" | localize}}
            </nz-form-label>
            <nz-form-control nz-col [nzSm]="20" nzHasFeedback>
                <nz-select name="languageName" #languageName="ngModel" [(ngModel)]="selectedLanguage" [nzPlaceHolder]="l('Language')"
                    [nzShowSearch]="true" [nzSize]="'large'" required>
                    <nz-option *ngFor="let option of languageNames" [nzLabel]="option.displayText" [nzValue]="option.value"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row>
            <nz-form-label nz-col [nzSm]="4" nzFor="languageIcon" nzRequired>
                {{"Flag" | localize}}
            </nz-form-label>
            <nz-form-control nz-col [nzSm]="20" nzHasFeedback>
                <nz-select name="languageIcon" #languageIcon="ngModel" [(ngModel)]="language.icon" [nzPlaceHolder]="l('Flag')"
                    [nzShowSearch]="true" [nzSize]="'large'" required>
                    <nz-option nzCustomContent *ngFor="let option of flags" [nzValue]="option.value" [nzLabel]="option.displayText">
                        <i class="anticon" [ngClass]="option.value"></i>                        
                        {{option.displayText}}
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item nz-row>
            <nz-form-label nz-col [nzSm]="4" nzFor="IsEnabled">
                {{"IsEnabled" | localize}}
            </nz-form-label>
            <nz-form-control nz-col [nzSm]="20">
                <nz-switch name="IsEnabled" [(ngModel)]="language.isEnabled" [nzCheckedChildren]="l('Yes')"
                    [nzUnCheckedChildren]="l('No')"></nz-switch>
            </nz-form-control>
        </nz-form-item>
    </fieldset>
    <div class="modal-footer">
        <button nz-button [nzType]="'default'" type="button" (click)="close()" [disabled]="saving">
            {{"Cancel" | localize}}
        </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!languageCreateOrEditForm.form.valid || saving"
            [nzLoading]="saving">
            <i nz-icon type="save" *ngIf="!saving"></i> {{"Save" | localize}}
        </button>
    </div>

</form>